<template>
  <BaseDialog
    title="登录记录"
    :visible="visible"
    :auto-height="true"
    :width="740"
    confirm-text="确定"
    :showConfirmButton="false"
    :showCancelButton="false"
    @open="handleOpen"
    @close="handleCacheClose"
  >
    <el-form ref="formRef" :model="formState" class="text-[#000] mt-[-40px]">
      <el-form-item prop="admin_id" class="mb-2">
        <el-input
          v-model="formState.admin_id"
          placeholder="请填写用户名字"
          class="w-[198px]"
        />
      </el-form-item>
    </el-form>
    <div class="flex-1 w-full h-[380px]">
      <el-table
        v-loading="loading"
        class="basic-table"
        height="100%"
        :data="dataSource"
      >
        <el-table-column
          prop="login_time"
          show-overflow-tooltip
          label="登录时间"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{
              formatUnix(+row.login_time) || '-'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          show-overflow-tooltip
          label="用户名"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{ row.username || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="login_ip"
          show-overflow-tooltip
          label="登录IP"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{ row.login_ip || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="login_addr"
          show-overflow-tooltip
          label="所在地"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{ row.login_addr || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="system_info"
          show-overflow-tooltip
          label="系统版本"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{ row.system_info || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="browser_info"
          show-overflow-tooltip
          label="浏览器版本"
          min-width="90"
        >
          <template #default="{ row }">
            <span class="font-normal">{{ row.browser_info || '-' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <BasicPagination
        ref="paginationRef"
        :disabled="loading"
        :total="queryParams.total"
        @change="getTableList"
      />
    </div>
  </BaseDialog>
</template>
<script lang="ts" setup>
import type { LoginRecord, UserModel } from '@/apis/model/user'
import BaseDialog from '@/components/base-dialog'
import { formatUnix } from '@/utils'
import { omit } from 'lodash-es'
interface IProps {
  visible: boolean
  loading: boolean
}
defineProps<IProps>()
interface IFormState {
  admin_id: string
}
interface IEmits {
  // 更新 显示状态
  (event: 'update:visible', value: boolean): void
  // 通知上层更新
  (event: 'reload'): void
  // 通知上层更新
  (event: 'close-dialog'): void
}
const emit = defineEmits<IEmits>()
const paginationRef = ref()
const formState = reactive<IFormState>({ admin_id: '' })
interface IQueryState {
  offset: number
  limit: number
  total: number
}
const queryParams = reactive<IQueryState>({ offset: 0, limit: 5, total: 0 })
const dataSource = ref<LoginRecord[]>([])
//弹窗打开
const handleOpen = () => {
  getUserList()
  getTableList()
}

// 弹窗关闭
const handleCacheClose = () => {
  emit('update:visible', false)
}
const getTableList = (params: any = {}) => {
  const query = {
    ...omit({ ...formState, ...params }, ['total', 'page'])
  }
  login_record_list({ ...query }).then((res: any) => {
    dataSource.value = res.list
    queryParams.total = +res.total
  })
}
const userList = ref<UserModel[]>()
const getUserList = () => {
  userListApi({}).then(res => {
    userList.value = res?.list ?? []
  })
}
</script>

<style lang="scss" scoped></style>
